import React, {PureComponent} from "react";
import {connect} from "react-redux";
import {Button, Icon, Input, Modal, notification, Tooltip, Upload} from "antd";
import {importConsolidate, query} from "./actions";
import lodash from 'lodash';
import {getOpenFollow, getPrincipal} from "../../lib/identity";

const {TextArea} = Input;

class Toolbar extends PureComponent {
    // dataList 为导入失败的列表
    state = {visible: false, dataList: []};
    customRequest = (options) => {
        const {dispatch, filter = {}} = this.props;
        dispatch(importConsolidate({
            file: options.file
        })).then(action => {
            if (action.payload.length === 0) {
                notification.success({
                    message: '导入成功'
                });
            } else {
                this.setState({visible: true, dataList: [action.payload]});
            }
            dispatch(query({...filter}));
        });
    };

    handleCancelModal = () => {
        this.setState({visible: false, dataList: []});
    };

    uploadProps = {
        showUploadList: false,
        name: 'file',
        accept: '.xls, .xlsx, .csv',
        customRequest: this.customRequest
    };

    handleExport = () => {
        document.getElementById("export").submit();
        notification.success({
            message: '请等待文件导出'
        });
    };

    handleExportBySelect = () => {
        const {selectedRowKeys} = this.props;
        document.getElementById("ids").value = lodash.join(selectedRowKeys, ",");
        document.getElementById("exportBySelect").submit();
        notification.success({
            message: '请等待文件导出'
        });
    };

    render() {
        const {importLoading, filter = {}} = this.props;
        const data = [];
        delete filter.userId;
        for (let key of Object.keys(filter)) {
            const value = filter[key];
            if (value === undefined) {
                continue;
            }
            data.push({"key": key, "value": value});
        }
        return (
            <div className="actions">
                <Button href="/static/拼箱导入模板.xlsx" target="_blank">下载导入模板</Button>
                <Upload {...this.uploadProps}>
                    <Button disabled={importLoading}>
                        <Icon type="upload"/> 导入
                    </Button>
                </Upload>
                <Tooltip placement="top" title={"点击搜索后再导出，默认导出当天"}><Button onClick={this.handleExport}><Icon
                    type="export"/>导 出</Button></Tooltip>
                <Button disabled={this.props.selectedRowKeys.length === 0} onClick={this.handleExportBySelect}><Icon
                    type="export"/>勾选导出</Button>
                <Modal
                    visible={this.state.visible}
                    title="导入失败详情"
                    onCancel={this.handleCancelModal}
                    footer={null}
                    maskClosable={false}
                >
                    <TextArea
                        value={this.state.dataList}
                        autoSize={{minRows: 3, maxRows: 20}}
                    />
                </Modal>
                <form
                    id="export"
                    method="post"
                    target="_blank"
                    action="/api/consolidate/export"
                >
                    {data.map(item => (
                        <input
                            id={item.key}
                            name={item.key}
                            type="hidden"
                            value={item.value}
                        />
                    ))}
                </form>
                <form
                    id="exportBySelect"
                    method="post"
                    target="_blank"
                    action="/api/consolidate/exportBySelect"
                >
                    <input
                        id="ids"
                        name="ids"
                        type="hidden"
                    />
                </form>
            </div>

        );
    }
}

const mapStateToProps = state => {
    return {
        ...state.consolidate.list
    };
};

export default connect(mapStateToProps)(Toolbar);
